<template>
	<view class="note_detail">
		<u-swiper :list="noteList.images" keyName="src" indicator indicatorMode="line" circular height='750rpx'
			imgMode='aspectFit'></u-swiper>
		<view class="content_header">
			<u-avatar :src="noteList.user.avatar" size="45"></u-avatar>
			<text>{{noteList.user.username}}</text>
			<text class="iconf" v-if="isFocus" @click="cancelFocus()"><i class="iconfont icon-yiguanzhuhuati"
					style="font-size: 45rpx; color: #d81e06;"></i>
				已关注</text>
			<text class="iconf" v-else @click="focusUser()"><i class="iconfont icon-jiaguanzhuhuati"
					style="font-size: 45rpx;"></i>
				关注</text>
		</view>
		<view class="note_content">
			<u--text :text="noteList.note_title" type="primary" :lines="2" :size="20" style="margin-bottom: 20rpx;">
			</u--text>
			<u-read-more ref="uReadMore" toggle>
				<u-parse :content="noteList.content" @load="load"></u-parse>
			</u-read-more>
		</view>
		<u-divider text="分割线" :dashed="true" :dot="true"></u-divider>
		<text style="margin-left: 50rpx;color: red;">评论</text>
		<view class="note_comment">
			<commentbox :nid='nid'></commentbox>
		</view>
		<view class="note_footer">
			<view class="operation">
				<!-- <text><i class="iconfont icon-fenxiangxiao" style="font-size: 40rpx;"></i></text> -->
				<text @click="comment()"><i class="iconfont icon-pinglun" style="font-size: 40rpx;"></i></text>
				<text v-if="isCollect" @click="cancelCollect()"><i class="iconfont icon-shoucang" style="font-size: 40rpx;color: #d81e06;"></i>{{collectionsNum}}</text>
				<text @click="collectNote()" v-else><i class="iconfont icon-shoucang" style="font-size: 40rpx;"></i>{{collectionsNum}}</text>
				<text v-if="isThumbsUp" @click="cancelThumbsUp()"><i class="iconfont icon-dianzan" style="font-size: 40rpx;color: #d81e06;"></i>{{thumbsUpsNum}}</text>
				<text @click="thumbsUpNote()" v-else><i class="iconfont icon-dianzan" style="font-size: 40rpx;"></i>{{thumbsUpsNum}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import commentbox from '../../components/commentBox/commentBox.vue'
	export default {
		components: {
			commentbox
		},
		onLoad(options) {
			this.id = options.note_id
			this.showNote(),
				setTimeout(() => {
					// 请注意上方已在组件中添加ref-uReadMore
					this.$nextTick(() => {
						
				//		this.$refs.uReadMore.init();
					})
				}, 500);
		},
		data() {
			return {
				isFocus: false,
				isCollect: false,
				isThumbsUp: false,
				thumbsUpsNum:'',
				collectionsNum:'',
				cid: '',
				nid:'',
				noteList: {
					content: ``,
					collections:[],
					thumbsUps:[],
					user: {
						avatar: '',
						username: '',
					}
				},
				id: '',
			}
		},
		methods: {
			load() {
				this.$refs.uReadMore.init();
			},
			showNote() {
				uni.request({
					url: 'http://localhost:8081/note/getNoteByNoteId?id=' + this.id,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						//if (res.data.state == 200) {
						this.noteList = res.data
						this.isFocusO()
						this.isCollectO()
						this.isThumbsUpO()
						this.cid = this.noteList.uid
						this.nid = this.noteList.id
						this.collectionsNum = this.noteList.collections.length
						this.thumbsUpsNum = this.noteList.thumbsUps.length
						//	}
					}
				});
			},
			isFocusO() {
				for (let n = 0; n < this.noteList.contacts.length; n++) {
					if (this.noteList.contacts[n].uid == uni.getStorageSync("token")) {
						this.isFocus = true
					}
				}
			},
			focusUser() {
				uni.request({
					url: 'http://localhost:8081/user/insertContact?uid=' + uni.getStorageSync("token")+'&cid=' + this.cid,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						if (res.data.state == 200) {
							this.isFocus = true
							uni.$u.toast(res.data.message)
						} else {
							uni.$u.toast(res.data.message)
						}
					}
				});
			},
			cancelFocus() {
				uni.request({
					url: 'http://localhost:8081/user/delContactByCid?id=' + uni.getStorageSync("token"),
					method: 'DELETE',
					dataType: 'json',
					success: (res) => {
						if (res.data.state == 200) {
							this.isFocus = false
							uni.$u.toast(res.data.message)
						} else {
							uni.$u.toast(res.data.message)
						}
					}
				});
			},
			isCollectO() {
				for (let n = 0; n < this.noteList.collections.length; n++) {
					if (this.noteList.collections[n].uid == uni.getStorageSync("token")) {
						this.isCollect = true
					}
				}
			},
			collectNote() {
				uni.request({
					url: 'http://localhost:8081/user/insertCollection?uid=' + uni.getStorageSync("token")+'&cid=' + this.nid,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						if (res.data.state == 200) {
							this.collectionsNum++
							this.isCollect = true
							uni.$u.toast(res.data.message)
						} else {
							uni.$u.toast(res.data.message)
						}
					}
				});
			},
			cancelCollect() {
				uni.request({
					url: 'http://localhost:8081/user/delCollectionByCnid?id=' + this.nid,
					method: 'DELETE',
					dataType: 'json',
					success: (res) => {
						if (res.data.state == 200) {
							this.collectionsNum--
							this.isCollect = false
							uni.$u.toast(res.data.message)
						} else {
							uni.$u.toast(res.data.message)
						}
					}
				});
			},
			isThumbsUpO(){
				for (let n = 0; n < this.noteList.thumbsUps.length; n++) {
					if (this.noteList.thumbsUps[n].uid == uni.getStorageSync("token")) {
						this.isThumbsUp = true
					}
				}
			},
			cancelThumbsUp(){
				uni.request({
					url: 'http://localhost:8081/user/delThumbsupByTnid?id=' + this.nid,
					method: 'DELETE',
					dataType: 'json',
					success: (res) => {
						if (res.data.state == 200) {
							this.thumbsUpsNum--
							this.isThumbsUp = false
							uni.$u.toast(res.data.message)
						} else {
							uni.$u.toast(res.data.message)
						}
					}
				});
			},
			thumbsUpNote(){
				uni.request({
					url: 'http://localhost:8081/user/insertThumbsup?uid=' + uni.getStorageSync("token")+'&nid=' + this.nid,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						if (res.data.state == 200) {
							this.thumbsUpsNum++
							this.isThumbsUp = true
							uni.$u.toast(res.data.message)
						} else {
							uni.$u.toast(res.data.message)
						}
					}
				});
			},
			comment(){
				uni.navigateTo({
					url:'../comment/comment?uid='+uni.getStorageSync("token")+'&nid=' + this.nid,
				})
			}
		}
	}
</script>

<style lang="scss">
	.note_detail {
		.content_header {
			margin: 10rpx 40rpx;
			display: flex;
			padding: 15rpx 0;
			align-items: center;

			text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}

			.iconf {
				margin-left: 250rpx;
				font-size: 26rpx;
			}
		}

		.note_content {
			margin: 10rpx 40rpx;
		}

		.note_comment {
			margin: 40rpx 40rpx;
			padding-bottom: 100rpx;
		}

		.note_footer {
			width: 100%;
			margin: auto;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			border-top: 2rpx solid #cdcdcd;

			.operation {
				display: flex;
				justify-content: space-around;
			}
		}
	}
</style>
